<template>
	<view class="u-padding-20"  	style="background: linear-gradient(180deg,#5A53CE, #5A53CE);display: inline-block;width: 750rpx;min-height: 100vh">
		
		
		<view class=" " style="margin:0rpx auto 40rpx auto;width: 700rpx;">
			<!-- <view style="font-size: 42rpx;font-weight: bold;">开台提示</view> -->
			<view class="" style="color: #F1A616;font-size: 40rpx;font-weight: bold;">尊敬的会员您好！</br></view>
			<view style="color: #fff;margin-top: 10rpx;">
				 您即将开启{{tableInfo.carportName}}桌台，开台后即可打开灯光哦~
			</view>
			<view class="u-font-24" style="color: #fff;">桌台费用:{{tableInfo.basePrice}}/小时;超过后{{tableInfo.overPrice}}/分钟</view>
		</view>
		<view class="">
			<view class="contentBlock" style="position: relative;overflow: hidden;margin: 10rpx auto;">
				<view class="  " style="color: #fff;font-size: 26rpx;">账号余额(元)</view>
				<view style="color: #F1A616;font-size: 60rpx;">
					￥{{tableInfo.balance}}
				</view>
				<!-- <view class="u-text-center  " style="color: #fff;font-size:22rpx;">充值有优惠</view> -->
			</view>
		</view>

		<!-- <view class="" style="padding: 0 40rpx;">
			<view style="margin-top: 20rpx;"></view>
			<u-section title="充值金额" :right="false" line-color='#4F8BFF'></u-section>
			<view class=" shadow" style=";margin: auto;">
				<view class="u-flex u-flex-wrap  u-margin-top-20 ">
					<view style="margin-right:40rpx;" @click="Block(index,item)" v-for="(item,index) in list"
						:key="index" v-if="list.length" class="listBlock" :class="current==index?'Listchange':''">
						<view style="font-size: 24rpx;">{{item.money}}<text>元</text></view>
						<view style="font-size: 22rpx;" class="u-type-info u-margin-top-10">
							赠送:{{item.saleMoney}}<text>劵</text></view>
					</view>
				</view>
			</view>
			<view @click="add" style="background: #4F8BFF;
			border-radius: 68rpx;
			margin-top: 20rpx;
			position: relative;
			top: 9999;
			box-shadow: 0px 6rpx 12rpx 0px rgba(2,88,255,0.28);text-align: center;padding: 20rpx 0;color: #fff;">
				立即充值
			</view>
		</view> -->



		<view class="contentBlock" style="position: relative;overflow: hidden;">
			<view style="color: #fff;">{{tableInfo.carportName}}</view>
			<view style="position: absolute;right: 0;top: -40rpx;">
				<w-wave :txt="tableInfo.type?'台球':'棋牌'"></w-wave>
			</view>
			<view v-if="!tableInfo.status" style="color: #fff;text-align: center;margin: 20rpx 0;">
				<view style="font-size: 96rpx;">￥{{tableInfo.basePrice}}</view>
				<!-- <view class="u-font-24">桌台费用:{{tableInfo.basePrice}}/小时;超过后{{tableInfo.overPrice}}/分钟</view> -->
				<!-- <view>每{{tableInfo.baseTime}}分钟，押金￥{{tableInfo.yajin}}</view> -->
			</view>

			<view v-else style="color: #fff;text-align: center;margin: 100rpx 0;">
				<view style="font-size: 96rpx;">{{tableInfo.orders.minute}}分钟</view>
				<view>本次使用时长</view>
			</view>

			<view style="color: #fff;padding-top: 20rpx;
			border-top: 1rpx solid rgba(255,255,255,0.30);margin-top: 20rpx;">
				押金{{tableInfo.yajin}}元;结账后押金自动退回支付账户！

			</view>

			<view v-if="!tableInfo.status" @click="ok" style="background: linear-gradient(180deg,#ffffff, #f2efff, #e2ddff);
border-radius: 68rpx;
margin-top: 20rpx;
position: relative;
top: 9999;
box-shadow: 0px 6rpx 12rpx 0px rgba(2,88,255,0.28);text-align: center;padding: 20rpx 0;color: #4F8BFF;">
				{{ Number(user.balance)  >Number(tableInfo.basePrice)?'立即开台':'支付押金平台'}}
			</view>
			<view v-else @click="endTable" style="background:#FF4646;
			border-radius: 68rpx;
			margin-top: 20rpx;
			box-shadow: 0px 6px 12px 0px rgba(2,88,255,0.28);text-align: center;padding: 20rpx 0;color: #fff;">
				{{tableInfo.orders.memberId==user.id?'结算费用':'替好友付款'}}
			</view>

		</view>


		<u-toast ref="uToast" />


	</view>
</template>

<script>
	import wxpay from '@/common/wxpay.js'
	export default {
		props: {
			tableInfo: {
				type: Object,
				default: () => {}
			},
			user: {
				type: Object,
				default: () => {}
			},
			info: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				list: [],
				current: 0
			}
		},
		onReady() {
			this.getCharge()

		},
		methods: {
			Block(index) {
				this.current = index;
			},
			getCharge() {
				this.$u.post('/index/recharge', {
					store_id: this.tableInfo.storeId
				}).then(res => {
					this.list = res
				})
			},
			add() {

				this.$u.post('/indent/recharge', {
					recharge_id: this.list[this.current].id,
					store_id: this.tableInfo.storeId
				}).then(res => {
					const wx = new wxpay(res);
					wx.pay().then(res => {
						this.$refs.uToast.show({
							title: '充值成功',
							type: 'success',
							callback: () => {
								this.$parent.$parent.getUser()
							}
						})
					}).catch(err => {

					})
				})
				// uni.navigateTo({
				// 	url:'/pages/my/charge?id='+this.tableInfo.storeId
				// })
			},

			ok() {
				this.$emit('ok', this.tableInfo.id)
			},

			endTable() {
				this.$emit('endTable', this.tableInfo.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contentBlock {
		width: 700rpx;
		margin: 40rpx auto;
		padding: 20rpx 40rpx;
		background: linear-gradient(180deg, #4f8bff, #745eff);
		border-radius: 20rpx;
		box-shadow: 0px 2rpx 10rpx 0px rgba(0, 0, 0, 0.06);
	}

	.listBlock {
		text-align: center;
		border: 1rpx solid #bebebe;
		border-radius: 10rpx;
		border: 1rpx solid #f0f0f0;
		/* line-height: 120rpx; */
		margin-bottom: 20rpx;
		padding: 20rpx 30rpx;
	}

	.Listchange {
		background: rgba(228, 239, 254, 0.60);
		border: 0;
		transition: all 0.3s;
		border: 1px solid #4f8bff;
	}
</style>